<template>
  <b-page class="sjtj-list page-list" :load="loading">
    <div class="filter-container">
      当前任务：
      <a-select
        :value="gameId"
        placeholder="活动"
        class="filter-item"
        style="width: 230px;"
        @change="gameChange">
        <a-select-option
          v-for="item in gameList"
          :key="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
      <span class="ml-10">当前公众号：</span>
      <a-select
        :value="mpId"
        placeholder="公众号"
        class="filter-item"
        @change="mpChange"
        style="width: 230px;">
        <a-select-option
          v-for="item in mpList"
          :key="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
    </div>
    <div v-show="!gameId" style="height: 100%">
      <div class="sjtj-list-empty-game">暂无数据</div>
    </div>
    <div v-show="gameId">
      <a-row class="mt-3" :gutter="20">
        <a-col :md="12">
          <single-data-pane ref="singleDataPane"/>
        </a-col>
        <a-col :md="12">
          <basic-line-chart ref="basicLineChart"/>
        </a-col>
      </a-row>
      <a-row class="mt-3" :gutter="20">
        <a-col :md="12">
          <total-pie-special-label ref="totalPieSpecialLabel"/>
        </a-col>
        <a-col :md="12">
          <histogram-fission ref="histogramFission"/>
        </a-col>
      </a-row>
      <a-table
        rowKey="id"
        class="mt-5 fill"
        :pagination="pagination"
        :columns="columns"
        @change="handleTableChange"
        :dataSource="rowList">
        <span slot="addTIme" slot-scope="text, record">
          {{ record.joinNotShare+record.shareNotFinish+record.finish }}
        </span>
        <span slot="rank" slot-scope="text, record">
          {{ getFinish(record) }}%
        </span>
        <span slot="mpName" slot-scope="text, record">
          {{ getNew(record) }}%
        </span>
        <span slot="mpId" slot-scope="text, record">
          {{ getFinish(record) }}%
        </span>
        <span slot="updatedBy" slot-scope="text, record">
          {{ record.fansNew-record.fansAdd }}
        </span>
        <span slot="createdBy" slot-scope="text, record">
          {{ getFanUnfollow(record) }}%
        </span>
        <span slot="mpNickname" slot-scope="text, record">
          {{ getNewFanUnfollow(record) }}%
        </span>
      </a-table>

    </div>
  </b-page>
</template>

<script>
    import ModelEdit from './edit/hdgl-edit'
    import SingleDataPane from './sjtj-sub/single-data-pane'
    import BasicLineChart from './sjtj-sub/basic-line-chart'
    import TotalPieSpecialLabel from './sjtj-sub/total-pie-special-label'
    import HistogramFission from './sjtj-sub/histogram-fission'
    import { keepN } from '../../utils'
    import MP_API from '../../../api/mp/mp'
    import API from '../../../api/mp/gameData'
    import TASK_API from '../../../api/mp/gameTask'

    export default {
        name: 'HdglList',
        components: {
            HistogramFission,
            TotalPieSpecialLabel,
            BasicLineChart,
            SingleDataPane,
            ModelEdit
        },
        data () {
            return {
                model: {},
                filter: {},
                gameState: [{ label: '全部', value: null }, { label: '进行中', value: 'ING' }, {
                    label: '已暂停',
                    value: 'PAUSE'
                },
                    { label: '已结束', value: 'END' },
                    { label: '已禁用', value: 'BANNED' }],
                mpList: [],
                gameList: [],
                rowList: [],
                total: 0,
                size: 100,
                current: 0,
                modifyId: 0,
                loading: 0,
                editing: false,
                gameId: null,
                mpId: '',
                pagination: {
                    total: 0,
                    pageSize: 10000 // 每页中显示10条数据
                },
                columns: [
                    {
                        title: '时间',
                        dataIndex: 'reportTime',
                        scopedSlots: { customRender: 'reportTime' }
                    },
                    {
                        title: '参与未推广',
                        dataIndex: 'joinNotShare'
                    },
                    {
                        title: '推广未完成',
                        dataIndex: 'shareNotFinish'
                    },
                    {
                        title: '完成任务',
                        dataIndex: 'finish'
                    },
                    {
                        title: '累计参与',
                        dataIndex: 'fansJoin',
                        scopedSlots: { customRender: 'fansJoin' }
                    },
                    {
                        title: '任务完成率',
                        dataIndex: 'mpId',
                        scopedSlots: { customRender: 'mpId' }
                    },
                    {
                        title: '带新系数',
                        dataIndex: 'mpName',
                        scopedSlots: { customRender: 'mpName' }
                    },
                    {
                        title: '新关注粉丝',
                        dataIndex: 'fansNew'
                    },
                    {
                        title: '取关新粉丝',
                        dataIndex: 'updatedBy',
                        scopedSlots: { customRender: 'updatedBy' }
                    },
                    {
                        title: '净增粉丝',
                        dataIndex: 'fansAdd'
                    },
                    {
                        title: '新粉丝取关率',
                        dataIndex: 'createdBy',
                        scopedSlots: { customRender: 'createdBy' }
                    },
                    {
                        title: '新粉丝占比',
                        dataIndex: 'mpNickname',
                        scopedSlots: { customRender: 'mpNickname' }
                    }
                ]
            }
        },
        computed: {
            query () {
                return this.$route.query
            },
            parentGameId () {
                return this.query.gameTaskId
            },
            gzhUserId () {
                return this.$store.state.user.info.gzhUserId
            }
        },
        watch: {
            gameId () {
                this.updateData()
            },
            mpId () {
                this.updateData()
            }
        },
        mounted () {
            this.initSelector()
        },
        methods: {
            handleTableChange (pagination) {
                this.pagination.current = pagination.current
                this.pagination.pageSize = pagination.pageSize
            },
            gameChange (data) {
                this.gameId = data
            },
            mpChange (value) {
                this.mpId = value
            },
            getFinish (row) {
                const temp = row.shareNotFinish + row.finish
                if (temp === 0) {
                    return 0
                }
                return keepN(row.finish / temp * 100, 0)
            },
            getNew (row) {
                const temp = row.shareNotFinish + row.finish
                if (temp === 0) {
                    return 0
                }
                return keepN(row.fansNew / temp * 100, 0)
            },
            getFanUnfollow (row) {
                if (row.fansNew === 0) {
                    return 0
                }
                return keepN(((row.fansNew - row.fansAdd) / row.fansNew) * 100, 0)
            },
            getNewFanUnfollow (row) {
                const temp = row.joinNotShare + row.shareNotFinish + row.finish
                if (temp === 0) {
                    return 0
                }
                return keepN(row.fansNew / temp * 100, 0)
            },
            updateData () {
                if (this.gameId) {
                    this.getPage()
                    this.$refs.singleDataPane.init(this.gameId, this.mpId, this.gzhUserId)
                    this.$refs.totalPieSpecialLabel.init(this.gameId, this.mpId, this.gzhUserId)
                    this.$refs.histogramFission.init(this.gameId, this.mpId, this.gzhUserId)
                }
            },
            initSelector () {
                // 获取所有的活动ID
                TASK_API.listMyGameSelector(this.gzhUserId).then(res => {
                    if (res.length === 0) {
                        this.gameId = ''
                        return
                    }
                    res.forEach(item => {
                        this.gameList.push({ label: item.name, value: item.id })
                    })
                    if (this.parentGameId) {
                        // 如果链接中带活动id，取该id
                        this.gameId = this.parentGameId
                    } else if (this.gameList.length > 0) {
                        // 如果用户活动列表不为空，取第一个活动ID
                        this.gameId = this.gameList[0].value
                    } else {
                        this.gameId = ''
                    }
                })
                this.mpList = [{ label: '全部', value: '' }]
                // 初始化自己的公众号账户
                MP_API.listByCurrentMpList()
                    .then(res => {
                        if (res.length === 0) {
                            return
                        }
                        res.forEach(item => {
                            this.mpList.push({ label: item.nickname, value: item.mpId })
                        })
                    })
            },
            /**
             * 初始化页面
             */
            getPage () {
                this.loading++
                API.listGameDetail({ gameId: this.gameId, mpId: this.mpId, gzhUserId: this.gzhUserId }).then(res => {
                    this.rowList = res
                    this.$refs.basicLineChart.init(res)
                    this.loading--
                }).catch(() => {
                    this.loading--
                })
            },
            getState () {
                return '已结束'
            }
        }
    }
</script>

<style lang="less">
    .sjtj-list {
        min-height: 100%;
        min-width: 1000px;

        .sjtj-list-empty-game {
            width: 100%;
            height: 100%;
            background: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 14px;
            color: #909399;
        }

        .filter-container {
            padding: 10px 16px;
            background: white;
        }

        .single-stat-pane {
            width: 100%;
        }
    }
</style>
